<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<script setup>
import Footertab from '@/components/footerTab.vue'
import Toptab from '@/components/topTab.vue'
import { Collapse, CollapseItem } from 'vant'
import { ref, onMounted } from 'vue'
import { categoryData, categoryList } from '@/api/home'
const activeNames = ref(['1'])
const dataBottom = ref([])
const dataList = ref([])

onMounted(async () => {
  const resData = await categoryList()
  dataList.value = resData.data.data
  console.log(dataList.value)


  const res = await categoryData()
  dataBottom.value = res.data.data
  // console.log(dataBottom.value)
})

// 新增activeIndex变量组
const activeIndex = ref({
  styles: 0,
  areas: 0,
  orders: 0,
  prices: 0,
  special: 0,
  status: 0
})

// 点击切换方法
const handleClick = (type, index) => {
  activeIndex.value[type] = index
}
</script>

<template>
  <!-- 顶部标签 -->
  <Toptab />
  <div class="category">
    <div class="cateTag">
       <ul>
        <li 
          :class="{ active: activeIndex.styles === 0 }"
          @click="handleClick('styles', 0)"
        >全部</li>
        <li 
          v-for="(item, index) in dataList.styles"
          :class="{ active: activeIndex.styles === index + 1 }"
          @click="handleClick('styles', index + 1)"
        >{{ item.name }}</li>
      </ul>
      <ul>
        <li :class="{ active: activeIndex.areas === 0}"
        @click="handleClick('areas', 0)"
        >全部</li>
        <li 
        v-for="(item,index) in dataList.areas"
        :class="{ active: activeIndex.areas === index + 1 }"
        @click="handleClick('areas', index + 1)"
        >{{ item.name }}</li>
      </ul>
      <ul>
        <li :class="{ active: activeIndex.orders === 0}"
        @click="handleClick('orders', 0)"
        >全部</li>
        <li 
        v-for="(item,index) in dataList.orders"
        :class="{ active: activeIndex.orders === index + 1 }"
        @click="handleClick('orders', index + 1)"
        >{{ item.name }}</li>
      </ul>
      

      <van-collapse v-model="activeNames">
        <van-collapse-item title="筛选" name="1">
          <ul>
            <li :class="{ active: activeIndex.prices === 0}"
            @click="handleClick('prices', 0)"
            >全部</li>
            <li 
            v-for="(item,index) in dataList.prices"
            :class="{ active: activeIndex.prices === index + 1 }"
            @click="handleClick('prices', index + 1)"
            >{{ item.name }}</li>
          </ul>
          <ul>
            <li :class="{ active: activeIndex.special === 0}"
            @click="handleClick('special', 0)"
            >全部</li>
            <li 
            v-for="(item,index) in dataList.special"
            :class="{ active: activeIndex.special === index + 1 }"
            @click="handleClick('special', index + 1)"
            >{{ item.name }}</li>
          </ul>
          <ul>
            <li :class="{ active: activeIndex.status === 0}"
            @click="handleClick('status', 0)"
            >全部</li>
            <li 
            v-for="(item,index) in dataList.status"
            :class="{ active: activeIndex.status === index + 1 }"
            @click="handleClick('status', index + 1)"
            >{{ item.name }}</li>
          </ul>
        </van-collapse-item>
      </van-collapse>
    </div>
    <div class="cateBottom">
      <van-grid :border="false" :column-num="3" :gutter="10">
        <van-grid-item v-for="item in dataBottom" :key="item">
          <van-image :src="item.vertical_cover" />
          <section class="text">
            <van-text-ellipsis :content="item.title" />
            <p class="flex"></p>
          </section>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
  <!-- 底部标签 -->
  <Footertab />
</template>

<!-- scope：指当前的样式仅在此页面作用 -->
<style lang="less" scoped>
.category {
  box-sizing: border-box;
  margin-top: 60px;
  .cateTag {
    ul {
      display: flex;
      flex-wrap: wrap;
      padding: 0 15px;
      margin-bottom: 15px;
      li {
        margin-right: 15px;
      }
    }
  }
}
.active {
  color: white;
  background-color: pink;
  border-radius: 5px;
  padding: 2px 5px;
}

:deep(.van-grid-item__content) {
  padding: 0 !important;
  border-radius: 5px;
  background-color: transparent;
  overflow: hidden !important;
}

:deep(.van-tabbar-item) {
  color: black;
  font-size: 14px;
}

:deep(.van-image__img) {
  border-radius: 5px;
  width: 100%;
  height: 100%;
  background-size: contain;
}

:deep(.van-grid-item__content--center) {
  align-items: flex-start;
}
</style>
